<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>辅助类和响应式工具</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .a{
            height: 50px;
            border: 1px solid #cccccc;
            background-color: #2aabd2;
        }
    </style>
</head>
<body style="margin: 50px">
<!--辅助类-->
<!--情景文本颜色-->
<p class="text-muted">Bootstrap框架</p>
<p class="text-primary">Bootstrap框架</p>
<p class="text-info">Bootstrap框架</p>
<p class="text-success">Bootstrap框架</p>
<p class="text-danger">Bootstrap框架</p>

<!--情景背景色-->

<p class="bg-danger">Bootstrap框架</p>
<p class="bg-info">Bootstrap框架</p>
<p class="bg-success">Bootstrap框架</p>
<p class="bg-primary">Bootstrap框架</p>

<!--关闭按钮-->
<button type="button" class="close">&times;</button>

<!--三角符号-->
<span class="caret"></span>

<!--快速浮动-->
<div class="pull-left">左边</div>
<div class="pull-right">右边</div>

<!--块级居中-->
<div class="center-block">居中</div>

<!--清理浮动-->
<div class="clearfix"></div>

<!--显示和隐藏-->
<div class="hidden">隐藏</div>
<div class="show">显示</div>


<!--响应式工具-->
<!--超小屏幕激活显示-->
<div class="visible-xs-block a">Bootstrap</div>
<!--超小屏幕激活隐藏-->
<div class="hidden-xs a">Bootstrap</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>